<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/templet/JQueryTemplate.js" />
<div id="jqueryTempletTab">
	<div title="API">
	    <h2>$.fn.ccayTemplate(op,datas)</h2>
	    <form class="ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>相关API</h3></samp>
					<span class="ccay-form-input">
						<h3>描述</h3>
					</span>
				</li>
				<li class="ccay-form-row">
			       	<samp>op</samp>
					<span class="ccay-form-input">配置项</span>
				</li>
				<li class="ccay-form-row">
			       	<samp>datas</samp>
					<span class="ccay-form-input">json数据源</span>
				</li>
			</ul>
			</div>
			</form>
			<h3>op设置说明</h3>
			<form class="ccay-form">
			<div class="ccay-form-body ccay-form-custom">
			<ul>
				<li class="ccay-form-row">
			       	<samp>tmpl</samp>
					<span class="ccay-form-input">模板对象选择器或模板字符</span>
				</li>
				<li class="ccay-form-row">
			       	<samp>key</samp>
					<span class="ccay-form-input">缓存模板的key值</span>
				</li>
				<li class="ccay-form-row">
			       	<samp>insertPosition</samp>
					<span class="ccay-form-input">模板生成的位置；默认为"append",内部；其他选项参看Jquery的dom对象处理</span>
				</li>
				<li class="ccay-form-row">
			       	<samp>ajax</samp>
					<span class="ccay-form-input">ajax参数配置</span>
				</li>
			</ul>
			</div>
			</form>
	</div>
	<div title="Demo">
	<h3>效果展示：</h3>
		<div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
			<h4><span>JQuery方式 通用Template</span></h4>
			<div>
			<ul id="listTemplate1"></ul>
			</div>
				<script type="text/javascript">
					$(function(){
						var users = [
						           {name:"隐形杀手",age:29,sex:"男"},
						           {name:"索拉",age:22,sex:"男"},
						           {name:"fesyo",age:23,sex:"女"},
						           {name:"恋妖壶",age:18,sex:"男"},
						           {name:"竜崎",age:25,sex:"男"},
						           {name:"你不懂的",age:30,sex:"女"}
						          ];
						
						//var txtTmpl = "<div>${index}. Name: ${name}； Age：${age}；Sex：${sex} </div>";
						var txtTmpl = "<table class='ccay-table'><tr><td width='16%'>${index}</td>"
							+"<td width='15%'>Name</td><td width='15%'>${name}</td><td width='15%'>Age</td>"
							+"<td width='15%'>${age}</td><td width='15%'>Sex</td><td width='15%'>${sex}</td></tr></table>";
						$('#listTemplate1').ccayTemplate({tmpl:txtTmpl},users);
					
					})
				</script>
				
       </div>
		<div class="clear"></div>
		<br>
<h3>html 源码:</h3>
<div class="codeArea">
<pre id='html'>
&lt;div>
   &lt;ul id="listTemplate">&lt;/ul>
&lt;/div>
</pre>
</div>
<h3>js 源码:</h3>
<div class="codeArea">
<pre id='js'>
var users = [
         {name:"隐形杀手",age:29,sex:"男"},
         {name:"索拉",age:22,sex:"男"},
         {name:"fesyo",age:23,sex:"女"},
         {name:"恋妖壶",age:18,sex:"男"},
         {name:"竜崎",age:25,sex:"男"},
         {name:"你不懂的",age:30,sex:"女"}
       ];
	
var txtTmpl = "&lt;table class='ccay-table'>&lt;tr>&lt;td width='16%'>${index}&lt;/td>"
             +"&lt;td width='15%'>Name&lt;/td>&lt;td width='15%'>${name}&lt;/td>&lt;td width='15%'>Age&lt;/td>"
             +"&lt;td width='15%'>${age}&lt;/td>&lt;td width='15%'>Sex&lt;/td>&lt;td width='15%'>${sex}&lt;/td>&lt;/tr>&lt;/table>";
             
$('#listTemplate').html(Ccay.UI.tmplList(txtTmpl,users));

$('#listTemplate').ccayTemplate({tmpl:txtTmpl},users);
</pre>
</div>
		<div>
			<a onclick="Ccay.example.openTry('#jqueryTempletTab',$('#js').html(),$('#html').html())">亲自试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>